<template>
  <el-popover
    width="200"
    trigger="click"
    placement="bottom-end"
    :offset="20"
    style="padding: 0"
    v-model="isPopover"
  >
    <el-input
      placeholder="请输入内容"
      v-model="value"
      class="input-with-select"
      @keyup.enter.native="confirm"
    >
    </el-input>

    <el-divider class="line"></el-divider>

    <el-button type="text" :disabled="!value" @click="confirm">筛选</el-button>
    <el-button type="text" @click="reset">重置</el-button>

    <div slot="reference">
      <i class="el-icon-arrow-down"></i>
    </div>
  </el-popover>
</template>

<script>
export default {
  inject: ["reload"],
  data() {
    return {
      value: "",
      isPopover: false,
    };
  },
  props: {
    type: {
      type: String,
      default: "",
    },
    defaultValue: {
      type: String,
      default: "",
    },
    options: {
      type: Array,
      default: function () {
        return [];
      },
    },
    defaultProps: {
      type: Object,
      default: function () {
        return {
          label: "label",
          value: "value",
        };
      },
    },
  },
  watch: {
    defaultValue(newVal, oldVal) {
      let self = this;
      self.value = newVal;
    },
  },
  methods: {
    confirm() {
      let self = this;
      this.isPopover = false;
      self.$emit("selectChange", { type: self.type, value: self.value });
    },
    reset() {
      this.value = "";
      this.confirm();
    },
  },
};
</script>
<style lang="less">
.line {
  margin: 12px 0 8px !important;
}
</style>
